<template>
  <div>
    <todeHeader @send="add"></todeHeader>
      <todeMain :list="show"   @remove="removeFn"></todeMain>
    <todeFlooter @flooter="showList" @clear="removeAll" :list="show"></todeFlooter>
  </div>
</template>

<script>
import todeHeader from '@/components/todeHeader'
import todeMain from '@/components/todeMain'
import todeFlooter from '@/components/todeFlooter'
import "../styles/base.css"
import "../styles/index.css"
export default {
  data(){
    return{
      list: [
              { id: 100, name: "吃饭", isDone: true },
              { id: 102, name: "睡觉", isDone: false },
              { id: 103, name: "打豆豆", isDone: true },
            ],
      mainFlag:"",
      flooterFlag:'all'
    }
  },
  components:{
  todeHeader,
  todeMain,
  todeFlooter
  },
  methods:{
    //增加
    add(val,flag){
      this.mainFlag=flag
        this.list.push({
        id:this.list.length>0?this.list[this.list.length-1].id+1:100,
        name:val,
        isDone:this.mainFlag
        })
      },
        // console.log(this.list)
    
    //删除
    removeFn(index){
        this.list.splice(index,1)
    },
    
    //删除已完成
    removeAll(){
        // this.list=this.list.filter(item=>item.isDone==false)
        // this.list=this.list.filter(item=>item.isDone==false)
        // this.newList=this.newList.filter(item=>item.isDone==false)
    },
      showList(val){
      // console.log(val)
      this.flooterFlag=val
    },
  },
  computed:{
    // 切换显示
    show(){
      if(this.flooterFlag=="unfinished"){
        return this.list.filter(item=>item.isDone==false)
      }
      else if(this.flooterFlag=="finished"){
        return this.list.filter(item=>item.isDone==true)  
      }else{
        return this.list
      }
    }
  }
}

</script>

<style>

</style>